@charset "utf-8";
@import "reset";
$width:100%;
@mixin title_li{
    font-size: 16px;
    color: #000000;
    font-weight: bold;
}
@mixin title_a{
    height: 23px;
    color: #000000;
    line-height: 23px;
    font-size: 14px;
}
@mixin ul_li{
    border: none;
    float: none;
    font-size: 14px;
    height: 23px;
    line-height: 23px;
    text-align: left;
}
@mixin line{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@mixin lines{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body{
    height: auto;
}
.web{
//  min-width: 1280px;
    width: $width;
    margin: 0 auto;
}
a{
    &:hover{
        opacity: 0.7;
    }
}
header{
    width: $width;
    height: 210px;
    .top{
        width: $width;
        background-color: #f0eeef;
        .top-span{
            padding-bottom: 10px;
            margin: 0 auto;
            .top-r{
                width: 178px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                float: left;
                span{
                    display: inline-block;
                    width: 52px;
                    height: 12px;
                    line-height: 12px;
                    font-size: 14px;
                    text-align: center;
                    color: #000000;
                    transition: all .5s;
                    &:first-child,&:nth-child(2){
                        border-right: 1px solid #a8a9ae;
                    }
                    &:hover{
                        color: #a5643c;
                        font-weight: 600;
                        text-decoration: underline;
                    }
                }
            }
            ul{
                li{
                    display: inline-block;
                    width: 130px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    a{
                        font-size: 14px;
                        width:129px;
                        height: 12px;
                        line-height: 12px;
                        display: inline-block;
                        color:#707070;
                        &:first-child,&:nth-child(2){
                            border-right: 1px solid #A8A9AE;
                        }
                        &:hover{
                            color: #a5643c;
                            font-weight: 600;
                            text-decoration: underline;
                        }
                        i{
                            vertical-align: middle;
                            
                        }
                        span{
                            color: #A5643C;
                            font-size: 12px;
                            font-weight: 500;
                        }
                    }
                }
            }
        }
    }
    .search{
        position: relative;
        width: $width;
        margin: 0 auto;
        .logo{
            margin-left: 10px;
            padding-top:20px ;
        }
        .search-box{
            width: 856px;
            height: 39px;
            background: #434343;
            border: 1px solid #000000;
            border-radius: 8px;
            margin-top: 29px;
            position: absolute;
            top: 25px;
            left: 200px;
            input[type="text"]{
                width: 786px;
                border: none;
                height: 37px;
                border-radius: 8px 0 0 8px;
                text-indent: 6px;
            }
            input[type="image"]{
                background: #434343;
                margin-left: 13px;
            }
            i{
                color:#FFFFFF;
                padding-left: 10px;
                vertical-align: middle;
            }
            input{
                vertical-align: middle;
            }
            li{
                display: inline-block;
                height: 30px;
                line-height: 30px;
                text-align: center;
                &:first-child a{
                    border-left: none;
                }
                a{
                    font-size: 12px;
                    width: 40px;
                    height: 12px;
                    color: #A8A9AE;
                    line-height: 12px;
                    border-left: 1px solid #A8A9AE;
                    display: inline-block;
                    &:hover{
                         color: #a5643c;
                         font-weight: 600;
                         text-decoration: underline;
                    }
                }
            }
        }
    }
}
//导航栏
.setion{
    width: $width;
    background: #252b38;
    .setion-nav{
        margin: 0 auto;
        min-width: 1280px;
        position: relative;
        li{
            float: left;
            text-align: center;
            height: 44px;
            line-height: 44px;
            display: block;
            position: relative;
            &:hover{
                >a{
                    animation: reversal .5s ease-in-out both;
                }
                .setion-ul-box{
                    height: 255px;
                    opacity: 1;
                }
                .line{
                    opacity: 1;
                }
            }
            a{
                display: block;
                width: 130px;
                height: 43px;
                line-height: 43px;
                font-size: 16px;
                color: #FFFFFF;
            }
            .line{
                border-top: 4px solid #A5643C;
                position: absolute;
                top: 0;
                width: $width;
                opacity: 0;
                
            }
        }
        .setion-ul-box{
            width: 1280px;
            height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 1s;
            background: #dadada;
            position: absolute;
            z-index: 100;
            left: 0;
            .setion-ul-content{
                max-width: 1100px;
                height: 255px;
                margin: 0 auto;
                font-size: 14px;
                line-height: 23px;
                .setion-text{
                    width: 200px;
                    height: 210px;
                    margin-top: 20px;
                    li{
                        @include ul_li;
                    }
                    a{
                       width: 70px;
                       @include title_a;
                    }
                    .title{
                            @include title_li;
                    }
                    .setion-text2{
                        margin-left: 30px;
                        margin-top: 20px;
                        a{
                            width: 56px;
                        }
                    }
                }
                .text2{
                        width: 120px;
                        height: 210px;
                        margin-top: 20px;
                        li{
                            @include ul_li;
                        }
                        .title{
                             @include title_li;
                        }
                        a{
                           width: 120px;
                           @include title_a;
                        }
                    }
                    .setion-text3{
                        margin-top: 20px;
                        a{
                            width: 84px;
                        }
                    }
                    .setion-text4{
                        width: 234px;
                        height: 210px;
                        margin-top: 20px;
                        li{
                            @include ul_li;
                        }
                        a{
                           width: 70px;
                           @include title_a;
                        }
                        .title{
                                @include title_li;
                        }
                    }
            }
        }
    }
}

footer{
    width: $width;
    .footer-title{
        width: 100%;
        margin: 0 auto;
        .footer-ul{
            max-width: 1318px;
            margin: 0 auto;
            border-bottom: 1px solid #000000;
            .footer-ul-box{
                width: 300px;
                height: 51px;
                text-align: center;
                border-right: 1px solid #cccccc;
                margin: 42px 0;
                &:last-of-type{
                    border-right: none;
                }
            }
            li{
                display: inline-block;
                img{
                    width: 50px;
                    height: 40px;
                }
            }
            h4{
                    text-align: left;
                }
            span{
                color: #9b9b9b;
            }
        }
    }
    .footer-link{
        width: $width;
        margin: 0 auto;
        .link-box{
            max-width: 1318px;
            margin: 0 auto;
            padding-top: 27px;
            .footer-link-ul{
                width: 262px;
                height: 222px;
                text-align: left;
                &:first-of-type{
                    padding-left: 57px;
                    width: 266px;
                }
                h4{
                    font-size:16px;
                    color: #535353;
                }
                a{
                    font-size: 12px;
                    color:#878787 ;
                }
            }
            .footer-code{
                font-size: 14px;
                li{
                    color: #919191;
                    &:first-of-type{
                        padding-bottom: 18px;
                    }
                }
            }
        }
    }
}
.bottom{
    width: $width;
    background: #252b38;
    height: 50px;
    text-align: center;
    .copyright{
        max-width: 1318px;
        margin: 0 auto;
        padding-top: 17px;
        p{
            display: inline-block;
            color: #cecfd1;
        }
        ul{
            display: inline-block;
            margin-left: 14px;
        }
        li{
            display: inline-block;
            border-left: 1px solid #cecfd1;
            padding: 0 10px 0 15px;
            a{
                color: #cecfd1;
                font-size: 12px;
            }
        }
    }
}
@keyframes reversal{
    0%{
//      border-top: none;
        transform: rotateX(0deg);
        color: #FFFFFF;
    }
    100%{
//      border-top: 4px solid #A5643C;
        transform: rotateX(360deg);
        color: #A5643C;
    }
}
.clearfix{
    &:after{
        clear: both;
        display: block;
        overflow: hidden;
        content: "";
        height: 0;
    }
}